<!--
  -    仪表设置
  - Author: lengleng (wangiegie@gmail.com)
  -->
<template>
  <div class="execution">
    <basic-container>
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="房产类型：">
          <el-select
            @change="bildingTypeChange"
            v-model="formInline.projectBuildingId"
            placeholder="活动区域"
          >
            <el-option
              v-for="(item,index) in bildingTypeOptions"
              :disabled="item.label=='形象店'"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="楼号/位置：">
          <el-select
            @change="foolrChange"
            v-model="formInline.projectUnitId"
            placeholder="活动区域"
          >
            <el-option
              v-for="(item,index) in foolerOptions"
              :key="index"
              :label='item.label'
              :value='item.value'
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公表类型">
          <el-select
            @change="surfaceChange"
            v-model="formInline.meterType"
            placeholder="请选择公表类型"
          >
            <el-option
              label="电表"
              :value="1"
            ></el-option>
            <el-option
              :disabled="formInline.projectBuildingId==3"
              label="水表"
              :value='2'
            ></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div style="display:flex;align-items: center;">
        <avue-form
          ref="form"
          v-model="obj"
          :option="option"
        >
        </avue-form>
      </div>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @row-del="rowDel"
        @refresh-change="refreshChange"
      >
        <template
          slot="menuLeft"
          slot-scope="scope"
        >
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-plus"
            :disabled="isAddBtn"
            @click="addOrUpdateHandle('add','')"
          >
            新增
          </el-button>
          <template v-if="!isDetail">
            <el-button
              type="primary"
              icon='el-icon-edit'
              @click="tip"
            >
              编辑
            </el-button>
          </template>
          <template v-if="isDetail">
            <el-button
              type="primary"
              icon='el-icon-circle-check'
              @click="doSubmit"
            >
              保存
            </el-button>
            <el-button
              @click="tip"
              icon='el-icon-circle-close'
            >
              取消编辑
            </el-button>
          </template>
        </template>
        <template
          slot="menu"
          slot-scope="scope"
        >
          <el-button
            type="text"
            @click="handleView('view',scope.row.id)"
          >
            查看
          </el-button>
          <el-button
            type="text"
            @click="addOrUpdateHandle('edit',scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            @click="handleDelete(scope.row,scope.index)"
          >
            清除
          </el-button>
        </template>
      </avue-crud>
      <public-surface-add
        ref="publicAdd"
        @refreshList="refreshList"
      ></public-surface-add>
      <view-detail ref="viewDetail"></view-detail>
      <!--<table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList"></table-form>-->
    </basic-container>
  </div>
</template>

<script>
import { fetchList, getObj, addObj, putObj, delObj, getMeterSettings, saveMeterSettings, mrpublicDetele } from '@/api/market/meter/setting/person'
import { tableOption, formOption } from '@/const/crud/market/meter/setting/person'
//import TableForm from './Form'
import { mapGetters } from 'vuex'
import publicAdd from './publicAdd'
import viewDetail from './viewDetail'
import { getDicType } from '@/api/common'
export default {
  name: 'SettingIndex',
  components: { 'public-surface-add': publicAdd, 'view-detail': viewDetail },
  data () {
    return {
      formInline: {
        projectBuildingId: '',
        projectUnitId: '',
        meterType: 1,
      },
      obj: {
        multipleRate: '',
        unitPrice: '',
        totalArea: ''
      },
      searchForm: {},
      tableData: [],
      addOrUpdateVisible: false,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      option: formOption,
      information_news_get: false,
      information_news_add: false,
      information_news_edit: false,
      information_news_del: false,
      isDetail: false,
      isAddBtn: true,
      bildingTypeOptions: [],
      foolerOptions: []
    }
  },
  created () {
    //this.estate_rmproject_get = this.permissions['information_news_get']
    //this.information_news_add = this.permissions['information_news_add']
    //this.information_news_edit = this.permissions['information_news_edit']
    //this.information_news_del = this.permissions['information_news_del']
  },
  computed: {
    ...mapGetters(['elements', 'permissions'])
  },
  mounted () {
    getDicType('rm_project_buiding_type').then(res => {
      this.bildingTypeOptions = res.data.data
      this.formInline.projectBuildingId = res.data.data[0].value
      this.getfoolerOptions()
    })
  },
  methods: {
    handleView (method, id) {
      this.$refs.viewDetail.init('view', id, this.formInline)
    },
    // 清除
    handleDelete (id) {
      this.$confirm('此操作将永久清除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        mrpublicDetele({ id: id.id }).then(res => {
          if (res.data.data) {
            this.$message.success("清除成功")
            this.refreshList()
          } else {
            this.$message.success("清除失败")
          }
        })
      }).catch(() => {

      });
    },
    getfoolerOptions () {
      if (this.formInline.projectBuildingId == 'complex_building') {
        this.tableOption.column[1].label = "楼层"
      } else {
        this.tableOption.column[1].label = "位置"
      }
      this.getfoolerOptionsValue(this.formInline.projectBuildingId)

    },
    getfoolerOptionsValue (name) {
      getDicType(name).then(res => {
        this.foolerOptions = res.data.data
        this.formInline.projectUnitId = res.data.data[0].value
        this.getMeterSettings()
      })
    },
    // 获取列表
    refreshList () {
      this.getMeterSettings()
    },
    tip () {
      this.option.detail = this.isDetail
      this.isDetail = !this.isDetail
    },
    bildingTypeChange () {
      this.getfoolerOptions()
    },
    foolrChange () {
      this.getMeterSettings()
    },
    surfaceChange () {
      if (this.formInline.meterType == 1) {
        this.tableOption.column[3].label = "电表名称"
        // this.option.column[0].label = '电表倍率'
        this.option.column[0].label = '电表单价(元/度)'
        // this.option.column[0].rules.message = '请输入电表倍率'
        this.option.column[1].rules.message = '请输入电表单价(元/度)'
      } else {
        this.tableOption.column[3].label = "水表名称"
        // this.option.column[0].label = '水表倍率'
        this.option.column[0].label = '水表单价(元/吨)'
        // this.option.column[0].rules.message = '请输入水表倍率'
        this.option.column[1].rules.message = '请输入水表单价(元/吨)'
      }
      this.getMeterSettings()
    },
    getMeterSettings () {
      if (this.emptyValue(this.formInline.meterType) || this.emptyValue(this.formInline.projectUnitId) || this.emptyValue(this.formInline.projectBuildingId)) {
        return
      }
      getMeterSettings(this.formInline).then(res => {
        if (res.data.data.id) {
          this.isAddBtn = false
        } else {
          this.isAddBtn = true
        }
        this.obj = res.data.data
        if (res.data.data.mrPublicMeterRelates) {
          this.tableData = res.data.data.mrPublicMeterRelates
        } else {
          this.tableData = []
        }
      })
    },
    emptyValue (value) {
      if (typeof value === undefined || value === '' || value === null || value === undefined) {
        return true
      } else {
        return false
      }
    },
    getList (page, params) {
      //this.tableLoading = true
      //fetchList(Object.assign({
      //  current: page.currentPage,
      //  size: page.pageSize
      //}, params, this.searchForm)).then(response => {
      //  this.tableData = response.data.data.records
      //  this.page.total = response.data.data.total
      //  this.tableLoading = false
      //}).catch(() => {
      //  this.tableLoading = false
      //})
    },
    rowDel: function (row, index) {
      this.$confirm('是否确认删除此条数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.id)
      }).then(data => {
        this.$message.success('删除成功')
        this.getList(this.page)
      })
    },
    // 新增、修改
    addOrUpdateHandle (isEdit, id) {
      if (isEdit == 'add') {
        this.$refs.publicAdd.init(isEdit, this.formInline.meterType, this.formInline.projectBuildingId, this.obj.id)
      } else if (isEdit == 'edit') {
        this.$refs.publicAdd.init(isEdit, this.formInline.meterType, this.formInline.projectBuildingId, id)
      }
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange (current) {
      this.page.currentPage = current
    },
    searchChange (form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },
    refreshChange () {
      this.refreshList()
    },
    doSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          saveMeterSettings(this.obj).then(res => {
            this.obj.id = res.data.data
            this.$message.success("保存成功")
            this.isAddBtn = false
            this.tip()
          })
        }
      })
    }
  }
}
</script>
